<template>
  <div style="background: #E6E6E6;">
    <sunNetworkHint :network-monitor-function="submitUploadFile" />
    <sunDrawerBack show="show_info" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="'课程资料【' + teacherName + '】'" @back="goBack" />
    <div style="padding: 14px;margin-top: 51px">
      <el-form ref="formData" class="fromBox" :model="formData" label-width="150px">
        <span v-for="item in infoList" :key="item.key">
          <span v-if="item.category === 'field'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-if="item.type === 'text'" class="item_box">
                <el-form-item
                  class="itemBottom"
                  :label="item.name + ':'"
                  :prop="item.key"
                >
                  <el-input
                    v-model="formData[item.key]"
                    :type="item.type.toLowerCase()"
                    :placeholder="'请输入'+item.name"
                  />
                  <span class="prompt-message">{{ item.describe || '' }}</span>
                </el-form-item>
              </span>
              <span v-if="item.type === 'textArea'" class="item_box">
                <el-form-item
                  class="itemBottom"
                  :label="item.name + ':'"
                  :prop="item.key"
                >
                  <el-input
                    v-model="formData[item.key]"
                    show-word-limit
                    :autosize="{minRows: 3}"
                    :type="item.type.toLowerCase()"
                    :minlength="item.min_word_number"
                    :maxlength="item.max_word_number || 9999"
                    :placeholder="'请输入'+item.name"
                  />
                  <span class="prompt-message">{{ item.describe || '' }}</span>
                </el-form-item>
              </span>
              <span v-if="item.type === 'richText'" class="item_box">
                <el-form-item
                  style="margin-bottom: 0"
                  :label="item.name + ':'"
                  :prop="item.key"
                />
                <div style="margin-bottom: 20px;">
                  <tinymce v-if="show_info" :id="'MyTinymce_'+item.key" ref="editor" v-model="formData[item.key]" :visible-sync="show_info" :upload-parameters="uploadParameters" />
                </div>
              </span>
              <span v-if="item.type === 'file' || item.type === 'files'" class="item_box">
                <div class="upload_item_box">
                  <el-form-item
                    class="itemBottom"
                    :label="item.name + ':'"
                    :prop="item.key"
                  >
                    <el-button size="mini" plain style="margin-right: 12px;" @click="uploadAtachment(item, null)"><i class="el-icon-plus sun-icon-right" />上 传</el-button>
                    <el-button v-if="item.config.open_file_library" size="mini" plain style="margin-right: 12px;" @click="dataBank(item, null)"><i class="el-icon-download sun-icon-right" />资料库</el-button>
                    <el-upload
                      class="upload-demo sun-el-upload"
                      action=""
                      :on-remove="(file, fileList) => {onRemove(file, fileList, item.key, false)}"
                      :on-preview="onPreview"
                      :file-list="formData[item.key]"
                      list-type="text"
                    >
                      <div style="display: none;" />
                    </el-upload>
                    <div class="prompt-message"><span>说明：{{ item.describe || '' }} ( 只能上传后缀 {{ $SunSetAccept(item.exf) }} 文件，且不超过 {{ item.file_size }}M )</span></div>
                  </el-form-item>
                  <div class="downloadBox" style="margin-top: 50px;">
                    <div v-for="download in formData[item.key]" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                      <i class="el-icon-download" style="color: #409EFF" />
                    </div>
                  </div>
                </div>
              </span>
            </div>
          </span>
          <span v-if="item.category === 'group'">
            <div class="category_box">
              <div class="name_box">{{ item.name }}</div>
              <span v-for="el in item.children" :key="el.key">
                <div>
                  <span v-if="el.type === 'text'" class="item_box">
                    <el-form-item
                      class="itemBottom"
                      :label="el.name + ':'"
                      :prop="el.key"
                    >
                      <el-input
                        v-model="formData[item.key][el.key]"
                        :type="el.type.toLowerCase()"
                        :placeholder="'请输入'+el.name"
                      />
                      <span class="prompt-message">{{ el.describe }}</span>
                    </el-form-item>
                  </span>
                  <span v-if="el.type === 'textArea'" class="item_box">
                    <el-form-item
                      class="itemBottom"
                      :label="el.name + ':'"
                      :prop="el.key"
                    >
                      <el-input
                        v-model="formData[item.key][el.key]"
                        show-word-limit
                        :autosize="{minRows: 3}"
                        :type="el.type.toLowerCase()"
                        :minlength="el.min_word_number"
                        :maxlength="el.max_word_number || 9999"
                        :placeholder="'请输入'+el.name"
                      />
                      <span class="prompt-message">{{ el.describe }}</span>
                    </el-form-item>
                  </span>
                  <span v-if="el.type === 'richText'" class="item_box">
                    <el-form-item
                      style="margin-bottom: 0"
                      :label="el.name + ':'"
                      :prop="el.key"
                    />
                    <div style="margin-bottom: 20px;">
                      <tinymce v-if="show_info" :id="'MyTinymce_'+el.key" ref="editor" v-model="formData[item.key][el.key]" :visible-sync="show_info" :upload-parameters="uploadParameters" />
                    </div>
                  </span>
                  <span v-if="el.type === 'file' || el.type === 'files'" class="item_box">
                    <div class="upload_item_box">
                      <el-form-item
                        class="itemBottom"
                        :label="el.name + ':'"
                        :prop="el.key"
                      >
                        <el-button size="mini" plain style="margin-right: 12px;" @click="uploadAtachment(item, el)"><i class="el-icon-plus sun-icon-right" />上 传</el-button>
                        <el-button v-if="item.config.open_file_library" size="mini" plain style="margin-right: 12px;" @click="dataBank(item, el)"><i class="el-icon-download sun-icon-right" />资料库</el-button>
                        <el-upload
                          class="upload-demo sun-el-upload"
                          action=""
                          :on-remove="(file, fileList) => {onRemove(file, fileList, item.key, el.key)}"
                          :on-preview="onPreview"
                          :file-list="formData[item.key][el.key]"
                          list-type="text"
                        >
                          <div style="display: none;" />
                        </el-upload>
                        <div class="prompt-message"><span>说明：{{ el.describe || '' }} ( 只能上传后缀 {{ $SunSetAccept(el.exf) }} 文件，且不超过 {{ el.file_size }}M )</span></div>
                      </el-form-item>
                      <div class="downloadBox" style="margin-top: 50px;">
                        <div v-for="download in formData[item.key][el.key]" :key="download.path" @click="$XhrDownload(download.path, download.name, '')">
                          <i class="el-icon-download" style="color: #409EFF" />
                        </div>
                      </div>
                    </div>
                  </span>
                </div>
              </span>
            </div>
          </span>
        </span>
        <div v-if="is_self_evaluation_grade && source === 'old'" class="but-list" style="margin-bottom: 14px;padding: 14px;display: flex; flex-direction: row; align-items:center;">
          <div style="padding-right: 12px">自评等级</div>
          <el-radio-group v-model="currentItem.self_evaluation_grade">
            <div v-for="(grade, grade_index) in grade_List" :key="grade_index" style="display: inline-block;margin-right: 14px;    padding: 10px 0;">
              <el-radio :label="grade.value">{{ grade.label }}</el-radio>
            </div>
          </el-radio-group>
        </div>
      </el-form>
      <div class="but-list">
        <el-button size="mini" @click="goBack">取 消</el-button>
        <el-button v-for="(btn) in footerBtn" :key="btn.id" :disabled="currentItem.status === 2" :loading="operationUploading" :type="btn.type || 'primary'" size="mini" @click="onFinish(btn)">
          {{ btn.name }}
        </el-button>
      </div>
    </div>
    <el-dialog
      width="60%"
      class="sun-el-dialog"
      :modal="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="showUploadFileEdit"
    >
      <div style="display: flex; flex-direction: row; align-items:center;">
        <el-upload
          class="show-upload-demo"
          action=""
          :disabled="!chooseFileMultiple && !!((linkList.length && linkList.length) || uploadList.length)"
          :http-request="(file) => {chooseFiles(file)}"
          :on-preview="onPreview"
          :accept="fileExf"
          :multiple="chooseFileMultiple"
          :auto-upload="true"
          list-type="text"
        >
          <div style="display: none;" />
          <!-- <el-button size="mini" :disabled="!chooseFileMultiple && uploadList.length !== 0" :type="uploadType === 'local' ? 'primary' : ''" style="margin-right: 12px;" @click="uploadType = 'local'"><i class="el-icon-folder-opened sun-icon-right" />选择文件</el-button> -->
          <el-button :disabled="!chooseFileMultiple && !!((linkList.length && linkList.length) || uploadList.length)" size="mini" type="primary" style="margin-right: 12px;" @click="uploadType = 'local'"><i class="el-icon-folder-opened sun-icon-right" />选择文件</el-button>
        </el-upload>
        <!-- <el-button v-if="file_remote_link" size="mini" :type="uploadType === 'link' ? 'primary' : ''" style="margin-right: 12px;" @click="uploadType = 'link'"><i class="el-icon-link sun-icon-right" />插入课程资源网址</el-button> -->
        <el-button v-if="file_remote_link" :disabled="!chooseFileMultiple && !!((linkList.length && linkList.length) || uploadList.length)" size="mini" type="primary" style="margin-right: 12px;" @click="uploadType = 'link'"><i class="el-icon-link sun-icon-right" />插入课程资源网址</el-button>
      </div>
      <el-form ref="filesInfo" :model="filesInfo">
        <el-form-item
          v-if="uploadType === 'link'"
          style="margin-top: 20px;width: 100%"
          label="网址"
          prop="path"
        >
          <div style="color: #FF0000;">{{ '( 提示：请输入 http:// 或 https:// 开头的网站网站 )' }}</div>
          <div v-for="(link, link_index) in linkList" :key="link_index" class="flex_center_align" style="margin-top: 10px;width: 100%;">
            <div class="flex_center_align" style="width: calc(100% - 80px)">
              <span style="display: inline-block;width: 45px;">{{ '标题：' }}</span>
              <el-input v-model="link.file_sub_name" style="width: calc(50% - 45px)" placeholder="请输入二级标题!">
                <template slot="prepend">{{ filesInfo.name }}</template>
              </el-input>
              <span style="display: inline-block;width: 45px;margin-left: 5px">{{ '网址：' }}</span>
              <el-input v-model="link.path" style="width: calc(50% - 50px)" placeholder="请输入远程课程资源网址" />
            </div>
            <div class="flex_center_around" style="width: 40px;height: 40px;" @click="delLink(link_index)">
              <i class="el-icon-remove-outline" style="font-size: 20px;color: #FF0000;" />
            </div>
            <div v-if="(chooseFileMultiple ? true : linkList.length === 0) && (link_index === linkList.length - 1)" class="flex_center_around" style="width: 40px;height: 40px;" @click="setSuffix()">
              <i class="el-icon-circle-plus-outline" style="font-size: 20px;color: #409eff;" />
            </div>
          </div>
        </el-form-item>

        <el-form-item
          v-if="uploadType === 'local'"
          label="文件名称（文档名称可修改）"
          prop="name"
        >
          <div v-for="(file, file_index) in uploadList" :key="file_index" style="margin-bottom: 10px">
            <div class="flex_center_align" style="width: 100%;position: relative;">
              <el-input v-model="file.file_sub_name" placeholder="文件选择完成将自动填充副标题,也可修改!" style="width: calc(100% - 120px);">
                <template slot="prepend">{{ filesInfo.name }}</template>
                <template slot="append">{{ `.${file.file.name.split('.')[file.file.name.split('.').length - 1]}` }}</template>
              </el-input>
              <div class="flex_center_around" style="width: 120px;height: 40px;" @click="delFile(file_index, file.uploadstate)">
                <i v-if="file.uploadstate === 0" class="el-icon-remove-outline" style="font-size: 20px;color: #FF0000;" />
                <!-- <el-progress v-if="file.uploadstate === 1" :width="40" :stroke-width="3" type="circle" :percentage="file.percentage" /> -->
                <div v-if="file.uploadstate === 1" style="width: 120px;font-size: 12px;padding-left: 10px">
                  <span style="display: block;line-height: 20px;"><strong>速度：</strong><span style="color:#409EFF;line-height: 20px;">{{ file.uploadSpeed }}</span></span>
                  <span style="display: block;line-height: 20px;"><strong>进度：</strong><span style="color:#409EFF;line-height: 20px;">{{ `${file.percentage} %` }}</span></span>
                </div>
                <i v-if="file.uploadstate === 2" class="el-icon-success" style="font-size: 20px;color: #409EFF" />
                <el-progress v-if="file.uploadstate === 3" :width="40" :stroke-width="3" status="warning" type="circle" :percentage="file.percentage" />
              </div>
            </div>
            <div v-if="file.msg && file.uploadstate === 3" style="font-size: 12px;line-height: 16px;color: #ff0000;padding-top: 5px">
              失败原因：{{ file.msg }}
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" :disabled="uploading" @click="showUploadFileEdit = false, uploading = false, uploadType = '', initFilesInfo(0)">取 消</el-button>
        <el-button type="primary" size="small" :loading="uploading" :disabled="!uploadList.length && !linkList.length" @click="submitUploadFile">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { remove } from '@/api/request'
import { mapGetters } from 'vuex'
// import { MessageBox } from 'element-ui'
import SunDrawerBack from '@/sun-components/SunDrawerBack'
import Tinymce from '@/sun-components/Tinymce'
import { $tooltips, $dialogs } from '@/sun-components/SunMsg.js'
import $uploadFile from '@/sun-components/SunUploadFiles.js'
export default {
  name: 'ProcessCommonInformateInformation',
  components: { SunDrawerBack, Tinymce },
  props: {
    source: {
      type: String,
      default: ''
    },
    infoList: {
      type: Array,
      default() {
        return []
      }
    },
    footerBtn: {
      type: Array,
      default() {
        return []
      }
    },
    operationUploading: {
      type: Boolean,
      required: false
    },
    formData: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      chooseFileMultiple: false,
      showUploadFileEdit: false,
      uploading: false,
      courseItem: null,
      courseItemEl: null,
      grade_List: [{ 'value': 'A', 'label': 'A级' }, { 'value': 'B', 'label': 'B级' }, { 'value': 'C', 'label': 'C级' }, { 'value': 'D', 'label': 'D级' }],
      fileExf: '',
      fileMaxSize: 0,
      uploadType: '',
      file_remote_link: false,
      uploadList: [],
      linkList: [],
      filesInfo: {
        name: '',
        suffix: '',
        path: ''
      }
    }
  },
  computed: {
    currentItem() {
      return this.$parent.$parent.currentItem
    },
    show_info() {
      return this.$parent.$parent.show_info
    },
    is_self_evaluation_grade() {
      return this.$project_config.project_config.teacher ? this.$project_config.project_config.teacher.self_evaluation_grade : false
    },
    ...mapGetters([
      'publicRoute'
    ]),
    teacherName() {
      return this.$parent.$parent.currentItem?.teacher?.name
    },
    uploadParameters() {
      const parameters = {
        evaluation_course_id: this.$parent.$parent.currentItem?.evaluation_course_id,
        teacher_id: this.$parent.$parent.currentItem?.teacher_id
      }
      return parameters
    }
  },
  watch: {
    uploadType(val) {
      if (val && val === 'link') {
        this.linkList = [
          {
            path: '',
            file_sub_name: '',
            target: 'blank'
          }
        ]
      }
    }
  },
  methods: {
    async dataBank(item, el) {
      const _that = this
      const filter = {
        'filter[uid]': _that.$parent.$parent.currentItem.teacher_id
      }
      if (el) {
        // 单文件上传限制
        if (el.type === 'file' && _that.formData[item.key][el.key].length !== 0) {
          $tooltips(`${el.name}为单文件上传!`, 'warning')
          return
        }
        // 过滤文件大小
        filter['filter[SizeBefore]'] = Number(el.file_size) * 1024 * 1024
        // 设置文件格式
        // el.exf = el.exf.replace('.', '')
        // filter['filter[file_type]'] = el.exf.replace(new RegExp(',.', 'g'), ',')
        filter['filter[file_type]'] = _that.$SunSetAccept(el.exf).replace(new RegExp(',.', 'g'), ',')
        // 文件数量限制
        filter['multiple'] = el.type === 'files' ? 'checkbox' : 'radio'
        // 设置index页面提交时赋值变量
        filter['item_el_key'] = item.key + ',' + el.key
      }
      if (item && !el) {
        // 单文件上传限制
        if (item.type === 'file' && _that.formData[item.key].length !== 0) {
          $tooltips(`${item.name}为单文件上传!`, 'warning')
          return
        }
        // 过滤文件大小
        filter['filter[SizeBefore]'] = Number(item.file_size) * 1024 * 1024
        // 设置文件格式
        // item.exf = item.exf.replace('.', '')
        // filter['filter[file_type]'] = item.exf.replace(new RegExp(',.', 'g'), ',')
        filter['filter[file_type]'] = _that.$SunSetAccept(item.exf).replace(new RegExp(',.', 'g'), ',')
        // 文件数量限制
        filter['multiple'] = item.type === 'files' ? 'checkbox' : 'radio'
        // 设置index页面提交时赋值变量
        filter['item_el_key'] = item.key
      }
      filter['filter[file_type]'] = filter['filter[file_type]'].replace('.', '')
      _that.$parent.$parent.dataBankFile = filter
      _that.$parent.$parent.show_dataBank = true
    },
    async uploadAtachment(item, el) {
      const _that = this
      _that.courseItem = item // item
      _that.courseItemEl = el // item.children
      if (el) {
        // 设置是否开启远程连接
        _that.file_remote_link = el.config.file_remote_link
        // 设置文件大小限制
        _that.fileMaxSize = Number(el.file_size)
        // 设置默认文件标题为字段name
        _that.filesInfo.name = el.name
        // 设置文件格式
        _that.fileExf = _that.$SunSetAccept(el.exf)
        // 单文件上传限制
        if (el.type === 'file' && _that.formData[item.key][el.key].length !== 0) {
          $tooltips(`${el.name}为单文件上传!`, 'warning')
          return
        }
        // 设置单选多选
        if (el.type === 'files') {
          _that.chooseFileMultiple = true
        } else {
          _that.chooseFileMultiple = false
        }
      }
      if (item && !el) {
        // 设置是否开启远程连接
        _that.file_remote_link = item.config.file_remote_link
        // 设置文件大小限制
        _that.fileMaxSize = Number(item.file_size)
        // 设置默认文件标题为字段name
        _that.filesInfo.name = item.name
        // 设置文件格式
        _that.fileExf = _that.$SunSetAccept(item.exf)
        // 单文件上传限制
        if (item.type === 'file' && _that.formData[item.key].length !== 0) {
          $tooltips(`${item.name}为单文件上传!`, 'warning')
          return
        }
        // 设置单选多选
        if (item.type === 'files') {
          _that.chooseFileMultiple = true
        } else {
          _that.chooseFileMultiple = false
        }
      }
      _that.showUploadFileEdit = true
    },
    async chooseFiles(file) {
      const _that = this
      const fileSize = Math.ceil(file.file.size / Math.pow(1024, 2))
      if (fileSize > _that.fileMaxSize) {
        if (_that.publicRoute === 'admin') {
          $tooltips(`文件 ${file.file.name} 超过 ${_that.fileMaxSize} M,如需上传 ${fileSize}M 文件需到【基础设置——资料字段】中设置对应字段文件大小`, 'warning')
        }
        if (_that.publicRoute === 'user') {
          $tooltips(`文件 ${file.file.name} 超过 ${_that.fileMaxSize} M,如需上传 ${fileSize}M 文件请联系管理员设置文件大小限制`, 'warning')
        }
        return
      }
      file['file_sub_name'] = file.file.name.substring(0, file.file.name.lastIndexOf('.'))
      file['uploadstate'] = 0
      file['percentage'] = 0
      _that.uploadList.push(file)
    },
    async delFile(index, uploadstate) {
      const _that = this
      if (uploadstate === 1 || uploadstate === 2) return
      $dialogs('确定移除当前文件?', 'warning').then(() => {
        _that.uploadList.splice(index, 1)
        if (!_that.uploadList.length) {
          _that.uploadType = ''
        }
      }).catch(() => {})
    },
    async delLink(index) {
      this.linkList.splice(index, 1)
      if (!this.linkList.length) {
        this.uploadType = ''
      }
    },
    async setSuffix() {
      if (this.linkList[this.linkList.length - 1].path === '') {
        return
      }
      this.linkList.push({
        path: '',
        file_sub_name: '',
        target: 'blank'
      })
    },
    async onFinish(btn) {
      if (this.is_self_evaluation_grade && this.source === 'old') {
        if (this.currentItem.self_evaluation_grade === '') {
          $tooltips('请选择自评等级', 'warning')
          return
        }
      }
      this.$parent.$parent.currentBtn = btn
      this.$parent.$parent.onFinish()
    },
    async submitUploadFile() {
      const _that = this
      if (_that.uploadType === 'local') { // 提交本地选择文件
        if (_that.uploadList.every(ele => ele.uploadstate === 2)) { // 全部上传成功
          _that.initFilesInfo(10)
        }
        const data = { // 上传参数
          evaluation_type: _that.source,
          key: _that.courseItemEl ? _that.courseItemEl.key : _that.courseItem.key,
          teacher_id: this.$parent.$parent.currentItem.teacher_id,
          name: _that.filesInfo.name
        }
        _that.uploadList.forEach((file) => { // 同时上传所有文件
          data['file_sub_name'] = file.file_sub_name
          if (file.uploadstate === 1 || file.uploadstate === 2) return // 0 待上传 1 上传中 2 上传成功 3 上传失败
          try {
            file.uploadstate = 1 // 上传中
            $uploadFile(file, data, _that.$parent.$parent.currentRow.evaluation_system_id)
              .then((response) => {
                if (response.code === 0) {
                  file.uploadstate = 2 // 上传成功
                  if (_that.courseItemEl) {
                    _that.formData[_that.courseItem.key][_that.courseItemEl.key].push({ uid: _that.$uuid(), name: `${_that.filesInfo.name}-${file.file_sub_name}.${file.file.name.split('.')[file.file.name.split('.').length - 1]}`, path: response.data.path, url: response.data.path })
                  } else {
                    _that.formData[_that.courseItem.key].push({ uid: _that.$uuid(), name: `${_that.filesInfo.name}-${file.file_sub_name}.${file.file.name.split('.')[file.file.name.split('.').length - 1]}`, path: response.data.path, url: response.data.path })
                  }
                }
                if (response.code === 4000) {
                  file['msg'] = response.msg
                  file.percentage = 0
                  file.uploadstate = 3 // 上传失败
                }
                if (_that.uploadList.every(ele => ele.uploadstate === 2)) { // 全部上传成功
                  _that.uploading = false
                  _that.initFilesInfo(10)
                }
              }).catch((err) => {
                file.percentage = 0
                file['msg'] = err.msg
                file.uploadstate = 3
              })
          } catch { // 记录上传失败文件
            file.percentage = 0
            file.uploadstate = 3 // 将状态改为未上传
            file['msg'] = '执行失败!'
          }
        })
      } else if (_that.linkList.length) { // 提交链接文件
        _that.linkList.forEach(link => {
          if (link.path) {
            if (_that.courseItemEl) {
              _that.formData[_that.courseItem.key][_that.courseItemEl.key].push({ uid: _that.$uuid(), name: `${_that.filesInfo.name}-${link.file_sub_name}`, path: link.path, target: link.target })
            } else {
              _that.formData[_that.courseItem.key].push({ uid: _that.$uuid(), name: `${_that.filesInfo.name}-${link.file_sub_name}`, path: link.path, target: link.target })
            }
          }
        })
        _that.initFilesInfo(50)
      } else {
        // $tooltips('还没有文件...', 'warning')
      }
    },
    async initFilesInfo(time) {
      const _that = this
      if (!time) {
        _that.uploadList.forEach(item => {
          if (item.uploadstate === 1) { // 取消上传
            item.fileXhr.abort()
          }
          if (item.uploadstate === 2 && !item.target) { // 删除上传成功的文件
            if (_that.courseItemEl) {
              _that.formData[_that.courseItem.key][_that.courseItemEl.key].splice(_that.formData[_that.courseItem.key][_that.courseItemEl.key].findIndex(delitem => delitem.path === JSON.parse(item.fileXhr.response).data.path), 1)
            } else {
              _that.formData[_that.courseItem.key].splice(_that.formData[_that.courseItem.key].findIndex(delitem => delitem.path === JSON.parse(item.fileXhr.response).data.path), 1)
            }
            remove('file/delete', { path: JSON.parse(item.fileXhr.response).data.path })
          }
        })
      }
      setTimeout(() => { // 初始化提交数据
        _that.filesInfo.path = ''
        _that.filesInfo.name = ''
        _that.filesInfo.suffix = ''
        _that.uploadList = []
        _that.uploadType = ''
        _that.linkList = []
        if (time) {
          _that.showUploadFileEdit = false
        }
      }, time)
    },
    async onPreview(file) { // 文件预览及下载
      const _that = this
      if (file.target === 'blank') {
        window.open(file.path, '_blank')
      } else {
        _that.$parent.$parent.showPreview = true
        _that.$parent.$parent.previewFile = file
      }
      // const _that = this
      // MessageBox.confirm(``, `${file.name}`, {
      //   confirmButtonText: '预览',
      //   cancelButtonText: '下载',
      //   cancelButtonClass: 'confirmBg',
      //   showClose: true,
      //   distinguishCancelAndClose: true
      // }).then((confirm) => {
      //   if (file.target === 'blank') {
      //     window.open(file.path, '_blank')
      //   } else {
      //     _that.$parent.$parent.showPreview = true
      //     _that.$parent.$parent.previewFile = file
      //   }
      // }).catch((cancel) => {
      //   if (cancel === 'cancel') {
      //     _that.$XhrDownload(file.path, file.name, '', _that)
      //   }
      // })
    },
    async onRemove(file, fileList, itemkey, elkey) { // 文件删除需同步删除formData中绑定的数据
      const _that = this
      // 记录删除文件 注在上传成功处必须添加url否则获取不到需要删除的path链接
      const url = file.path || file.url
      if (!file.target && url && (_that.$parent.$parent.delRemoveFile.findIndex(item => item === url) === -1)) {
        // 条件：不是超链接 存在path(上传成功并已提交过的文件),存在url(上传成功未提交文件),并且在_that.$parent.$parent.delRemoveFile不存在(去重：避免重复删除报错影响体验)
        _that.$parent.$parent.delRemoveFile.push(url)
      }
      if (elkey) {
        _that.formData[itemkey][elkey] = []
      } else {
        _that.formData[itemkey] = []
      }
      fileList?.forEach((item) => {
        if (item.status === 'success' && !elkey) {
          _that.formData[itemkey].push(item.response ? { uid: item.uid, name: item.name, url: item.response.data.url, path: item.response.data.url, size: item.size } : { uid: item.uid, name: item.name, url: item.url, path: item.url, size: item.size })
        }
        if (item.status === 'success' && elkey) {
          _that.formData[itemkey][elkey].push(item.response ? { uid: item.uid, name: item.name, url: item.response.data.url, path: item.response.data.url, size: item.size } : { uid: item.uid, name: item.name, url: item.url, path: item.url, size: item.size })
        }
      })
    },
    goBack() {
      this.$parent.$parent.setShowHidden('show_info')
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  @import '@/styles/information.scss';
  .el-dialog__wrapper {
    background: rgba(0,0,0,0.3) !important;
  }
  .show-upload-demo ::v-deep {
    ul{
      display: none !important;
    }
  }
</style>
